﻿
@{
    Layout = null;
}
@using Shop.Models

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" rel="stylesheet" href="/html/css/style.css" />


    <script type="text/javascript" src="/html/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/html/js/menu.js"></script>

    <script type="text/javascript" src="/html/js/n_nav.js"></script>
  


    <script type="text/javascript" src="/html/js/shade.js"></script>

    <title>尤洪</title>
</head>
<body>
    <!--Begin Header Begin-->
    <div class="soubg">
        <div class="sou">
            <!--Begin 所在收货地区 Begin-->
            <!--End 所在收货地区 End-->
            <span class="fr">
                <span class="fl">你好，请<a href="Login.html">登录</a>&nbsp; <a href="Regist.html" style="color:#ff4e00;">免费注册</a>&nbsp;|&nbsp;<a href="#">我的订单</a>&nbsp;|</span>

                <span class="fl">|&nbsp;关注我们：</span>
                <span class="s_sh"><a href="#" class="sh1">新浪</a><a href="#" class="sh2">微信</a></span>
                <span class="fr">|&nbsp;<a href="#">手机版&nbsp;<img src="/html/images/s_tel.png" align="absmiddle" /></a></span>
            </span>
        </div>
    </div>
    <div class="top">
        <div class="logo"><a href="Index.html"><img src="/html/images/logo.png" /></a></div>
        <div class="search">
            <form>
                <input type="text" value="" class="s_ipt" />
                <input type="submit" value="搜索" class="s_btn" />
            </form>
            <span class="fl"><a href="#">咖啡</a><a href="#">iphone 6S</a><a href="#">新鲜美食</a><a href="#">蛋糕</a><a href="#">日用品</a><a href="#">连衣裙</a></span>
        </div>
        <div class="i_car">
            <div class="car_t">购物车 [ <span>3</span> ]</div>
            <div class="car_bg">
                <!--Begin 购物车未登录 Begin-->
                <div class="un_login">还未登录！<a href="Login.html" style="color:#ff4e00;">马上登录</a> 查看购物车！</div>
                <!--End 购物车未登录 End-->
                <!--Begin 购物车已登录 Begin-->
                <ul class="cars">
                </ul>
                <div class="price_sum">共计&nbsp; <font color="#ff4e00">￥</font><span>1058</span></div>
                <div class="price_a"><a href="#">去购物车结算</a></div>
                <!--End 购物车已登录 End-->
            </div>
        </div>
    </div>
    <!--End Header End-->
    <!--Begin Menu Begin-->
    <!--End Menu End-->
    <div class="i_bg">
        <div class="content mar_20">
            <img src="/html/images/img1.jpg" />
        </div>

        <!--Begin 第一步：查看购物车 Begin -->
        <div class="content mar_20">
            <table border="0" class="car_tab" style="width:1200px; margin-bottom:50px;" cellspacing="0" cellpadding="0">
                <tr>
                    <td></td>
                    <td class="car_th" width="490">商品名称</td>
                    <td class="car_th" width="140">属性</td>
                    <td class="car_th" width="150">购买数量</td>
                    <td class="car_th" width="130">单价</td>

                    <td class="car_th" width="150">操作</td>
                </tr>
                @foreach (var item in (List<Cart>)ViewBag.List)
                {
                    <tr class="gItme">
                        <td> <input type="checkbox" value="@item.ProductInfoId" /></td>
                        <td>
                            <div class="c_s_img"><img src="@item.Image" width="73" height="73" /></div>
                            <span class="sname">@item.ProductInfoName</span>
                            
                        </td>
                        <td align="center">颜色：<span class="icolor">@item.Color</span></td>
                        <td align="center">
                            <div class="c_num">
                                <input type="button" value="" onclick="jianUpdate1(this);" class="car_btn_1" />
                                <input type="text" value="@item.Count" name="" class="car_ipt" />
                                <input type="button" value="" onclick="addUpdate1(this);" class="car_btn_2" />
                            </div>
                        </td>
                        <td align="center" style="color:#ff4e00;" class="tdprice">@item.Price</td>

                        <td align="center"><a onclick="ShowDiv('MyDiv','fade')">删除</a>&nbsp; &nbsp;<a href="#">加入收藏</a></td>
                    </tr>
                }


                <tr height="70">
                    <td colspan="6" style="font-family:'Microsoft YaHei'; border-bottom:0;">
                        <label class="r_rad"><input type="checkbox" name="clear" checked="checked" /></label><label class="r_txt">清空购物车</label>
                        <span class="fr">商品总价：<b style="font-size:22px; color:#ff4e00;" class="sumMoney">2899</b></span>
                    </td>
                </tr>
                <tr valign="top" height="150">
                    <td colspan="6" align="right">
                        <a href="#"><img src="/html/images/buy1.gif" /></a>&nbsp; &nbsp; 
                        <a href="#" id="btnBuy"><img src="/html/images/buy2.gif" /></a>
                    </td>
                </tr>
            </table>

        </div>
        <!--End 第一步：查看购物车 End-->
        <!--Begin 弹出层-删除商品 Begin-->
        <div id="fade" class="black_overlay"></div>
        <div id="MyDiv" class="white_content">
            <div class="white_d">
                <div class="notice_t">
                    <span class="fr" style="margin-top:10px; cursor:pointer;" onclick="CloseDiv('MyDiv','fade')"><img src="images/close.gif" /></span>
                </div>
                <div class="notice_c">

                    <table border="0" align="center" style="font-size:16px;" cellspacing="0" cellpadding="0">
                        <tr valign="top">
                            <td>您确定要把该商品移除购物车吗？</td>
                        </tr>
                        <tr height="50" valign="bottom">
                            <td><a href="#" class="b_sure">确定</a><a href="#" class="b_buy">取消</a></td>
                        </tr>
                    </table>

                </div>
            </div>
        </div>
        <!--End 弹出层-删除商品 End-->



        <div class="btmbg">

        </div>
        <!--End Footer End -->
    </div>
    <script src="~/Scripts/jquery-3.7.1.min.js"></script>
    <script>
       
        function getSum() {
            var sum = 0;
            $('.gItme').each(function (index, tr) {
               
                if ($(tr).find('input[type=checkbox]:checked').length>0) {
                    var count = $(tr).find('.car_ipt').val();  // 取出数量
                    var price = $(tr).find('.tdprice').text();
                    sum += parseInt(count) * parseFloat(price);

                }
            })
            $('.sumMoney').text(sum);
        }

        function jianUpdate1(obj) {
            var input = $(obj).next();
            var count = parseInt(input.val())
            if (count > 1) {
                count--;
                input.val(count)
                getSum();  
            }
        }

        function addUpdate1(obj) {
            var input = $(obj).prev()
            var count = parseInt(input.val())
            if (count < 5) {
                count++;
                input.val(count)
                getSum();  
            }
        }

        $(function () {  // 页面加载完成
            getSum();  

            // 如果有复选框，复选框勾选事件
            $('input[type=checkbox]').click(function () {
                getSum();  
            })

            // 点击结算按钮
            $('#btnBuy').click(function () {
                var items = [];   // 用来存放选中的商品
                $('.gItme').each(function (index, tr) {
                    if ($(tr).find('input[type=checkbox]:checked').length > 0) {
                        var count = $(tr).find('.car_ipt').val();  // 取出数量
                        var price = $(tr).find('.tdprice').text();
                        var name = $(tr).find('.sname').text();
                        var img = $(tr).find('img').attr('src')
                        var color = $(tr).find('.icolor').text();
                        var id = $(tr).find('input[type=checkbox]').val();
                        // 定义商品对象
                        let obj = {
                            count: count,
                            price: price,
                            ProductInfoName:name,
                            image:img,
                            color,
                            id
                        }
                        items.push(obj);
                    }
                })
                var order = {
                    items: items,  // 明细
                    sumprice: $('.sumMoney').text()  // 总价
                }
                //本地存储
                sessionStorage.setItem("Order", JSON.stringify(order));
                location.href = '/Order/confirm';
                return false;
            })
        })


    </script>
</body>
</html>
